<template>
	<view class="chat">
    <!-- 顶部标题 -->
    <view class="topTabbar" :style="{ 'height': workState !== '18' && workState !== '20' ? '140rpx' : '80rpx'}">
			<!-- <view class="work-top"> -->
				<view class="work-info">
					<view class="work-no">工单编号: {{ workid }}</view>
					<view class="work-time">{{ time }}</view>
				</view>
				<view class="work-btn" v-if="workState !== '18' && workState !== '20'">
					<u-button
						:plain="true"
						text="催单"
						shape="circle"
						size="small"
						@click="handleRemind"
					></u-button>
					<u-button
						type="warning"
						text="结单"
						shape="circle"
						size="small"
						@click="handleStatement"
					></u-button>
				</view>
			<!-- </view> -->
      <!-- 返回图标 -->
      <!-- <u-icon class="icon" name="arrow-left" size="20px" color="#000" @click="goback()"></u-icon> -->
      <!-- 标题 -->
      <!-- <view class="text">匿名</view> -->
    </view>
		<scroll-view  :style="{height: `${windowHeight-inputHeight - 180}rpx`}"
		id="scrollview"
		scroll-y="true" 
		:scroll-top="scrollTop"
		class="scroll-view"
		>
			<!-- 聊天主体 -->
			<view id="msglistview" class="chat-body">
				<!-- 聊天记录 -->
				<view v-for="(item,index) in msgList" :key="index">
					<!-- 自己发的消息 -->
					<view class="item self" v-if="item.opercode === '2019'" >
						<!-- 文字内容 -->
						<view class="content right">
						{{ item.content }}
						</view>
						<!-- 头像 -->
						<image class="avatar" style="background: #F6DED0;" :src="headimg?headimg: 'https://oss.aimlt.com/webui-static/aiyunyi-app/icon/moren.png'">
						</image>
					</view>
					<!-- 机器人发的消息 -->
					<view class="item Ai" v-if="item.opercode === '2018'">
						<!-- 头像 -->     
						<image class="avatar" style="background: #fff;" src="https://oss.aimlt.com/webui-static/aiyunyi-app/icon/logo.png">
						</image>
						<!-- 文字内容 -->
						<view class="content left">
							{{ item.content }}	
						</view>
					</view>
				</view>
			</view>
			 <!-- 评价 -->
			<view class="evaluate" v-if="workState === '18'">
				<image style="background: #fff;" class="avatar" :src="localIconSrc('logo.png')">
				</image>
				<view class="content left">
				<view class="title">请对我的服务做出评价</view>
				<u-radio-group v-model="radiovalue" placement="row" iconPlacement="left">
					<u-radio
						shape="square"
						:customStyle="{marginBottom: '8px'}"
						v-for="(item, index) in radiolist"
						:key="index"
						:label="item.name"
						:name="item.value"
						activeColor="#ff6005"
						:disabled="finished"
					>
				  </u-radio>
				</u-radio-group>
				<view class="title">是否解决问题</view>
				<u-radio-group v-model="value" placement="row" iconPlacement="left">
					<u-radio
						shape="square"
						:customStyle="{marginBottom: '8px'}"
						v-for="(item, index) in proList"
						:key="index"
						:label="item.name"
						:name="item.value"
						activeColor="#ff6005"
						:disabled="finished"
					>
				  </u-radio>
				</u-radio-group>
				<u--textarea
					v-model="content"
					placeholder="请告诉我您对此次服务的想法..."
					:disabled="finished"
				></u--textarea>
				<view style="float: right; margin-top: 20rpx;">
					<u-button
						:plain="true"
						text="提交"
						shape="circle"
						size="small"
						@click="submitEvaluat"
					></u-button>
				</view>
				</view>
			</view>
			<view class="finish" v-if="finished">
				感谢您的评价，祝您生活愉快！
			</view>
		</scroll-view>
		<!-- 底部消息发送栏 -->
		<!-- 用来占位，防止聊天消息被发送框遮挡 -->
		<view
			class="chat-bottom"
			v-show="workState !== '20' && workState !== '18'"
			:style="'bottom:'+bottomHeight+'px'"
		>
			<!-- <view class="send-msg"> -->
        <view class="uni-textarea">
					<view class="inp">
						<u--textarea
							v-model="chatMsg"
							placeholder="请详细描述你所遇到的问题"
							autoHeight
							:showConfirmBar="false"
							:adjustPosition="false"
							:fixed="true"
						></u--textarea>
					</view>
          <!-- <textarea v-model="chatMsg"
            maxlength="300"
            confirm-type="send"
            @confirm="handleSend"
            placeholder="请详细描述你所遇到的问题"
            :show-confirm-bar="false"
            :adjust-position="false"
            @linechange="sendHeight"
            @focus="focus" @blur="blur"
           auto-height></textarea> -->
					 <button @click="handleSend" class="send-btn">发送</button>
        </view>
				
			<!-- </view> -->
		</view>
	</view>
</template>
<script>
	import { getWorkContentList, WorkContentAdd, WorkReminder, WorkStatement, workEvaluate } from '@/api/wallet.js'
	export default{
		data() {
			return {
				//键盘高度
				keyboardHeight:0,
				//底部消息发送高度
				bottomHeight: 0,
				//滚动距离
				scrollTop: 0,
				userId:'',
				//发送的消息
				chatMsg:"",
				radiolist: [
					{ name: '好评', value: 1 },{ name: '一般', value: 2 },
					{ name: '差评', value: 3 }
				],
				proList: [
					{ name: '是', value: 1 },{ name: '否', value: 2 },
				],
				radiovalue: '',
				msgList:[
					{
						id: "ccbf8c26ce622001cdfbb7e3fc61bffd",
						workid: "404f6446fc7c423c217535f040e58c6c",
						projectid: "1",
						opercode: "2018",
						attachment: "",
						content: "用户发的",
						kfaccount: "10001",
						insert_time: "2024-07-31 09:20:05",
					},
					{
						id: "ccbf8c26ce622001cdfbb7e3fc61bffd",
						workid: "404f6446fc7c423c217535f040e58c6c",
						projectid: "1",
						opercode: "2019",
						attachment: "",
						content: "机器人发的",
						kfaccount: "10001",
						insert_time: "2024-07-31 09:20:05",
					}
				],
				workid: '',
				state: true,
				time: '',
				workState: '',
				value: '',
				content: '',
				finished: false, // 评价完成
				headimg: uni.getStorageSync('portrait')
			}
		},
		updated(){
			//页面更新时调用聊天消息定位到最底部
			this.scrollToBottom();
		},
		computed: {
			windowHeight() {
			    return this.rpxTopx(uni.getSystemInfoSync().windowHeight)
			},
			// 键盘弹起来的高度+发送框高度
			inputHeight(){
				return this.bottomHeight+this.keyboardHeight
			}
		},
		onLoad(param){
			console.log('pa', param)
			this.workid = param.param;
			this.time = param.time;
			this.workState = param.state;
      uni.onKeyboardHeightChange((res) => {
      	if (res.height > 0) {
      		// 键盘弹起
      		console.log('键盘弹起，高度:', res.height);
      		this.bottomHeight = res.height
      		// 可以在这里处理键盘弹起后的逻辑，比如调整布局
      	} else {
      		// 键盘收起
      		console.log('键盘收起');
      		this.bottomHeight = 0
      		// 可以在这里处理键盘收起后的逻辑
      	}
      });
		},
		onShow() {
			this.getContentList();
		},
		onUnload(){
			// uni.offKeyboardHeightChange()
		},
		methods: {
			async getContentList() {
				let param = {
					work_id: this.workid,
				}
				const contents = await getWorkContentList(param);
				console.log('kk', contents)
				const { data } = contents.data;
				this.msgList = data;
			},
			focus(){
				this.scrollToBottom()
			},
			blur(){
				this.scrollToBottom()
			},
			// px转换成rpx
			rpxTopx(px){
				let deviceWidth = uni.getSystemInfoSync().windowWidth
				let rpx = ( 750 / deviceWidth ) * Number(px)
				return Math.floor(rpx)
			},
			// 监视聊天发送栏高度
			sendHeight(){
				setTimeout(()=>{
					let query = uni.createSelectorQuery();
					query.select('.send-msg').boundingClientRect()
					query.exec(res =>{
						this.bottomHeight = this.rpxTopx(res[0].height)
					})
				},10)
			},
			// 滚动至聊天底部
			scrollToBottom(e){
				setTimeout(()=>{
					let query = uni.createSelectorQuery().in(this);
					query.select('#scrollview').boundingClientRect();
					query.select('#msglistview').boundingClientRect();
					query.exec((res) =>{
						if(res[1].height > res[0].height){
							this.scrollTop = this.rpxTopx(res[1].height - res[0].height)
						}
					})
				},15)
			},
			// 发送消息
			async handleSend() {
				//如果消息不为空
				if(!this.chatMsg||!/^\s+$/.test(this.chatMsg)){
					let param = {
						workid: this.workid,
						content: this.chatMsg
					};
					const data = await WorkContentAdd(param);
					console.log('obj', data)
					// let obj = {
					// 	botContent: "",
					// 	userContent: this.chatMsg,
     //        image:"/static/common/unname2.jpg"
					// }
					// this.msgList.push(obj);
					this.getContentList();
					this.chatMsg = '';
					this.scrollToBottom()
				}else {
					uni.showToast('不能发送空白消息')
				}
			},
			// 催单
			async handleRemind() {
				let param = {
					workid: this.workid
				};
				const remind = await WorkReminder(param);
				console.log('remind', remind);
				const { code, msg } = remind
				if(code && code == 500) {
					uni.showToast({
						title: msg,
						icon:'none',
						duration:5000
					})
					return
				}
				uni.showToast({
					title:'我们已经收到了您的催促，我们会尽快为您处理',
					icon:'none',
					duration:5000
				})
			},
			// 结单
			async handleStatement() {
				uni.showModal({
					title: "提示",
					content: "确定结单吗？",
					success: res => {
						if (res.confirm) {
							console.log('用户点击确定');
							let param = {
								workid: this.workid
							};
							WorkStatement(param).then(state => {
								console.log('state', state);
								setTimeout(() => {
									uni.navigateBack()
								}, 2000)
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
				
			},
			// 评价
			async submitEvaluat() {
				console.log('数据',this.value, this.radiovalue)
				let param = {
					workid: this.workid,
					problem_state: this.value,
					content: this.content,
					appraise_type: this.radiovalue
				};
				const res = await workEvaluate(param);
				console.log(res)
				this.finished = true;
			}
		}
	}
</script>
<style lang="scss" scoped>
	
	$chatContentbgc: #C2DCFF;
	$sendBtnbgc: #4F7DF5;
	
	view,button,text,input,textarea {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
 
	/* 聊天消息 */
	.chat {
     .topTabbar {
          width: 100%;
          height: 140rpx;
					padding: 10rpx 20rpx;
					background: #ffecd2;
          // display: flex;
          // justify-content: space-between;
      
			    .work-info {
						display: flex;
						justify-content: space-between;
						color: #{$sub-color};
						font-size: #{$explain-size};
					}
					
					.work-btn {
						display: flex;
						float: right;
						margin-top: 20rpx;
						
						::v-deep .u-button--plain,::v-deep .u-button--circle,::v-deep .u-button--small {
							background: transparent;
							color: #{$main-color};
							border: 1px solid #{$main-color};
							border-radius: 20rpx;
							height: 40rpx;
						}
						
						::v-deep .u-button--warning {
							color: #fff;
							background-color: #FF6005;
							border-color: #FF6005;
							margin-left: 20rpx;
						}
					}
					
          .icon {
            margin-left: 20rpx;
          }
      
          .text {
            margin: auto;
            font-size: 16px;
            font-weight: 700;
          }
      
          .button {
            width: 10%;
            margin: auto 20rpx auto 0rpx;
          }
        }
		.scroll-view {
			::-webkit-scrollbar {
					    display: none;
					    width: 0 !important;
					    height: 0 !important;
					    -webkit-appearance: none;
					    background: transparent;
					    color: transparent;
					  }
			
			// background-color: orange;
			background-color: #F6F6F6;
			
			.chat-body {
				display: flex;
				flex-direction: column;
				padding-top: 23rpx;
				// background-color:skyblue;
				
				.self {
					justify-content: flex-end;
				}
				.item {
					display: flex;
					padding: 23rpx 30rpx;
					// font-size: #{$text-size};
					// background-color: greenyellow;
 
					.right {
						background-color: #ffecd2;
					}
					.left {
						background-color: #FFFFFF;
					}
                    // 聊天消息的三角形
					.right::after {
						position: absolute;
						display: inline-block;
						content: '';
						width: 0;
						height: 0;
						left: 100%;
						top: 10px;
						border: 12rpx solid transparent;
						border-left: 12rpx solid #ffecd2;
					}
 
					.left::after {
						position: absolute;
						display: inline-block;
						content: '';
						width: 0;
						height: 0;
						top: 10px;
						right: 100%;
						border: 12rpx solid transparent;
						border-right: 12rpx solid #FFFFFF;
					}
 
					.content {
						position: relative;
						max-width: 486rpx;
						border-radius: 8rpx;
						word-wrap: break-word;
						padding: 24rpx 24rpx;
						margin: 0 24rpx;
						border-radius: 5px;
						font-size: #{$text-size};
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 42rpx;
					}
 
					.avatar {
						display: flex;
						justify-content: center;
						width: 78rpx;
						height: 78rpx;
						background: $sendBtnbgc;
						border-radius: 50rpx;
						overflow: hidden;
						
						image {
							align-self: center;
						}
 
					}
				}
			}
		}
 
		/* 底部聊天发送栏 */
		.chat-bottom {
			// width: 100%;
			// background: #F4F5F7;
			// transition: all 0.1s ease;
			// position: fixed;
			border: 1px solid red;
			
			background-color: #fff;
			display: flex;
			width: 100%;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			align-items: center;
			
			.send-msg {
				display: flex;
				align-items: flex-end;
				padding: 16rpx 30rpx;
				width: 100%;
				// min-height: 117rpx;
				background: #fff;
				transition: all 0.1s ease;
			}
 
			.uni-textarea {
				display: flex;
				align-items: flex-end;
				background: #fff;
				width: 100%;
				position: fixed;
				left: 50%;
				transform: translateX(-50%);
				padding: 20rpx 32rpx 120rpx;
				box-sizing: border-box;
				align-items: center;
				// padding-bottom: 50rpx;
				.inp {
					max-height: 160rpx;
					overflow-y: scroll;
					width: calc(100% - 160rpx);
				}
				// padding-bottom: 70rpx;  
				// textarea {
				// 	width: 537rpx;
				// 	min-height: 75rpx;
				// 	max-height: 500rpx;
				// 	background: #f1f1f1;
				// 	border-radius: 20rpx;
				// 	font-size: #{$text-size};
				// 	font-family: PingFang SC;
				// 	color: #{$one-title-color};
				// 	line-height: 74rpx;
				// 	padding: 5rpx 8rpx;
    //       text-indent: 30rpx;
				// }
			}
            
						
			.send-btn {
				text-align: center;
				margin-bottom: 4rpx;
				margin-left: 26rpx;
				width: 160rpx;
				// height: 90rpx;
				background: #{$main-color};
				border-radius: 50rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				// font-weight: 500;
				color: #FFFFFF;
			
				// line-height: 28rpx
			}
			// .send-btn {
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: center;
			// 	margin-bottom: 76rpx;
			// 	margin-left: 25rpx;
			// 	width: 120rpx;
			// 	height: 75rpx;
			// 	background: #ff6005;
			// 	border-radius: 40rpx;
			// 	font-size: 28rpx;
			// 	font-family: PingFang SC;
			// 	font-weight: 500;
			// 	color: #FFFFFF;
			// 	line-height: 28rpx;
			// }
		}
		
		.evaluate {
			display: flex;
			padding: 23rpx 30rpx;
			
			::v-deep .u-button--plain,::v-deep .u-button--circle,::v-deep .u-button--small {
				background: transparent;
				color: #{$main-color};
				border: 1px solid #{$main-color};
				border-radius: 20rpx;
				height: 40rpx;
			}
			
			::v-deep .u-button--warning {
				color: #fff;
				background-color: #FF6005;
				border-color: #FF6005;
				margin-left: 20rpx;
			}
			
			.title {
				margin: 20rpx 0;
			}
			.left {
				background-color: #FFFFFF;
			}
			 
			.left::after {
				position: absolute;
				display: inline-block;
				content: '';
				width: 0;
				height: 0;
				top: 10px;
				right: 100%;
				border: 12rpx solid transparent;
				border-right: 12rpx solid #FFFFFF;
			}
			 
			.content {
				position: relative;
				max-width: 486rpx;
				border-radius: 8rpx;
				word-wrap: break-word;
				padding: 24rpx 24rpx;
				margin: 0 24rpx;
				border-radius: 5px;
				font-size: #{$text-size};
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 42rpx;
			}
			.avatar {
				display: flex;
				justify-content: center;
				width: 78rpx;
				height: 78rpx;
				background: $sendBtnbgc;
				border-radius: 50rpx;
				overflow: hidden;
				
				image {
					align-self: center;
				}
			}
		}
		
		.finish {
			text-align: center;
			color: #{$main-color};
		}
	}
</style>